
<template>
    
         <div class="login_container">
             <div class="login_box">
                 <!-- 头像区域 -->
                <div class="avatar_box">
                    <img src="../assets/logo.png" alt="">
                </div>
                  <!-- 登录表单区 -->
  <el-form  :model="loginform" 
   label-width="0px" class="login_form" :rules="loginformrule" ref="loginformref">

                  <!-- label-width 给label 占位的 -->
                  <!-- 用户名 -->


                 
                <el-form-item  prop="username" >
                   <el-input  v-model="loginform.username" 
                    prefix-icon="iconfont icon-dengluyonghu"></el-input>
             </el-form-item>


                  <!--  密码 -- -->
                <el-form-item prop="password" >
                   <el-input v-model="loginform.password" prefix-icon="iconfont icon-denglu-mima" type="password"> </el-input>
                </el-form-item>

                <!-- 按钮区 --> 
          <el-form-item class="btns">

            <el-button type="primary" @click="login" >登录</el-button>

            <el-button type="info" @click="resetloginform">重置</el-button>
            </el-form-item>

                  </el-form>         


             </div>

         </div>
    
</template>

<script>

export default{
    
      data(){

        return{
            loginform:{
               username:"admin",
               password:"123456"
            },

            // 这是表单的验证规则
      loginformrule:{
               username:[ 
               { required: true, message: '请输入登入账户', trigger: 'blur' },
               { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
               ] ,
                 password:[  
                     { required: true, message: '请输入登入密码', trigger: 'blur' },
                     { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }

                 ],//验证密码

      },
        }

      },
      
      methods:{
          resetloginform(){
        //   console.log(this);
          this.$refs.loginformref.resetFields();
          },
         login(){
            //  validate这个是再次确认函数 是否正确格式
             this.$refs.loginformref.validate( async valid=>{
                // 如果正确 valid是 1 格式错误 valid是0
            //   console.log(valid);//
        //    valid
            if(!valid)  
            {
                    return this.$message.error("输入格式不对")
            } 
            
            // async await 阔以 简化返回的promise
             //取返回数据里面的data属性，重命名为res
          const {data:res} = await this.$http.post('login',this.loginform);
              
          if(res.meta.status !==200){
         
              return this.$message.error("登录失败");
          } 
            this.$message.success("登录成功")
            // 将登录成功之后的 token 保存到客户端 的 sessionStorage
            // 项目 中出现 登录之外的其他Api 接口必须 在登录之后才能访问 
            //  token 只在当前 网站打开期间有效  所以 将token 保存在   sessionStorage
                // console.log(res);
            // 通过编程式导航跳转到后台主页路由，路由地址是/home 

            window.sessionStorage.setItem('token',res.data.token);
            this.$router.push('/home')
             })
         }

          
      }

 
}
</script>


<style lang="less" scoped>
/* scope是保证不影响别人 只在自己身上生效 */
     .login_container{
         background-color: #2b4b6b;
         height: 100%;
     } 
     .login_box{
         width: 450px;
         height: 300px;
         background-color:#fff ;
         border-radius: 3px;
         position:absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%,-50%);
           .avatar_box{
              height: 130px;
              width: 130px;
              border: 1px solid #eee;
              border-radius: 50%;
              padding: 10px;
              box-shadow: 0 0 10px #ddd;
              position: absolute;
              left: 50%;
              transform: translate(-50%,-50%);
              background-color: #fff;
              
              img{
                  width: 100%;
                  height: 100%;
                  border-radius:50%;
                  background-color: #eee;
              }

     }
     }

     .login_form{
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;

     }
     .btns{
         display: flex;
         justify-content: flex-end;
     }
   

 
</style>